<template>
  <div class="container">
    <div class="header">
      <h1>无人机详情</h1>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      加载中...
    </div>

    <!-- 空状态 -->
    <div v-else-if="error" class="empty">
      未找到无人机信息
    </div>

    <!-- 详情内容 -->
    <div v-else>
      <!-- 无人机图片 -->
      <div class="card">
        <div class="card-title">无人机外观</div>
        <div class="image-container">
          <img :src="uavImageUrl" alt="无人机图片">
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="card">
        <div class="card-title">基本信息</div>
        <div class="info-item">
          <div class="info-label">型号</div>
          <div class="info-value">{{ uavInfo.uavType || '未知' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">名称</div>
          <div class="info-value">{{ uavInfo.uavName || '未知' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">外观</div>
          <div class="info-value">{{ uavInfo.uavExterior || '未知' }}</div>
        </div>
      </div>

      <!-- 状态信息 -->
      <div class="card">
        <div class="card-title">状态信息</div>
        <div class="info-item">
          <div class="info-label">状态</div>
          <div class="info-value">
            <span :class="['status-tag', uavStatusClass]">{{ uavStatusText }}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label">维护需求</div>
          <div class="info-value">
            <span :class="['status-tag', maintenanceStatusClass]">{{ maintenanceStatusText }}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label">仓储位置</div>
          <div class="info-value">{{ warehouseName || '未知' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';

// 路由参数获取
const route = useRoute();
const uavId = route.query.id;

// 响应式数据
const uavInfo = ref({});
const loading = ref(true);
const error = ref(false);
const baseApi = 'http://192.168.31.18:8081/tielingpowergriduavservice';

// 计算属性（处理显示逻辑）
const uavImageUrl = computed(() => {
  if (uavInfo.value.uavPhoto) {
    return `data:image/jpeg;base64,${uavInfo.value.uavPhoto}`;
  }
  return 'https://picsum.photos/400/300?random=1';
});

const uavStatusText = computed(() => {
  return uavInfo.value.uavStatus === '0' ? '在库' : '出库';
});

const uavStatusClass = computed(() => {
  return uavInfo.value.uavStatus === '0' ? 'status-normal' : 'status-warning';
});

const maintenanceStatusText = computed(() => {
  return uavInfo.value.isMaintenance === '0' ? '不需要维护' : '需要维护';
});

const maintenanceStatusClass = computed(() => {
  return uavInfo.value.isMaintenance === '0' ? 'status-normal' : 'status-warning';
});

const warehouseName = computed(() => {
  return uavInfo.value.warehouseName || '未知';
});

// 加载数据
const fetchUavDetail = async () => {
  try {
    const response = await axios.get(`${baseApi}/uav/get?id=${uavId}`);
    if (response.data.code === 200) {
      uavInfo.value = response.data.data;
    } else {
      error.value = true;
    }
  } catch (err) {
    console.error('获取数据失败', err);
    error.value = true;
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  if (uavId) {
    fetchUavDetail();
  } else {
    loading.value = false;
    error.value = true;
  }
});
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.card-title::before {
  content: '';
  width: 4px;
  height: 16px;
  background-color: #409eff;
  border-radius: 2px;
  margin-right: 8px;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
}

.info-label {
  width: 90px;
  color: #999;
  flex-shrink: 0;
}

.info-value {
  flex-grow: 1;
  color: #333;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status-normal {
  background-color: #f0f9eb;
  color: #52c41a;
}

.status-warning {
  background-color: #fff7e6;
  color: #faad14;
}

.image-container {
  width: 100%;
  height: 200px;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loading {
  text-align: center;
  padding: 40px 0;
  color: #666;
}

.empty {
  text-align: center;
  padding: 40px 0;
  color: #999;
}
</style>